<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>利用两个伪元素拼接</title>
	</head>
	<style>
		body{
			padding: 0;
			margin: 0;
		}
		.tab{
		  display: flex;
		  background-color: #55aa7f;
		  padding: 10px 15px 0 15px;
		  font-size: 14px;
		}
		.tab-item{
		  position: relative;
		  background-color: transparent;
		  padding: 10px 15px;
		  border-radius: 12px 12px 0 0;
		  cursor: pointer;
		  transition: .2s;
		}
		.tab-item::before,.tab-item::after{
		  position: absolute;
		  bottom: 0;
		  content: '';
		  width: 20px;
		  height: 20px;
		  border-radius: 100%;
		  box-shadow: 0 0 0 40px transparent;
		  transition: .2s;
		}
		.tab-item::before{
		  left: -20px;
		  clip-path: inset(50% -10px 0 50%);
		}
		.tab-item::after{
		  right: -20px;
		  clip-path: inset(50% 50% 0 -10px);
		}
		
		.tab-item:hover{
		  background-color: #ffaa7f;
		  /* color: #000; */
		}
		.tab-item:hover::before,
		.tab-item:hover::after{
		  box-shadow: 0 0 0 30px #ffaa7f;
		}
		.tab-item.active{
		  background-color: #ffffff;
		  z-index: 1;
		  /* color: #000; */
		}
		.tab-item.active::before,
		.tab-item.active::after{
		  box-shadow: 0 0 0 30px #ffffff;
		}
	</style>
	<body>
		<nav class="tab">
		  <a class="tab-item">苏苏</a>
		  <a class="tab-item active">苏苏</a>
		  <a class="tab-item">苏苏</a>
		  <a class="tab-item">苏苏</a>
		</nav>
	</body>
</html>
